<template>
  <!---------- 查询表单form begin ----------->
  <a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
      <a-form-item label="数据通道" class="smart-query-form-item">
        <a-select style="width: 150px" ref="select" v-model:value="queryForm.boxId" placeholder="请选择数据通道" allowClear @change="boxChange">
          <a-select-option v-for="item in boxList" :key="item.boxId" :value="item.boxId">
            {{ item.boxName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="采集设备" class="smart-query-form-item">
        <a-select style="width: 150px" ref="select" v-model:value="queryForm.deviceId" placeholder="请选择设备" allowClear @change="deviceChange">
          <a-select-option v-for="item in deviceList" :key="item.deviceId" :value="item.deviceId">
            {{ item.deviceName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item class="smart-query-form-item">
        <a-button @click="resetQuery" class="smart-margin-left10">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>
  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block"></div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="null" :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->

    <!---------- 表格 begin ----------->
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      rowKey="logId"
      bordered
      :loading="tableLoading"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'boxId'">
          {{ getDictLabel(record.boxId, boxList, { value: 'boxId', label: 'boxName' }) }}
        </template>
        <template v-if="column.dataIndex === 'deviceId'">
          {{ getDictLabel(record.deviceId, deviceList, { value: 'deviceId', label: 'deviceName' }) }}
        </template>
        <template v-if="column.dataIndex === 'isOnline'">
          <span :style="`color: ${record.isOnline ? '#39cd20' : '#f00'}`">{{ record.isOnline ? '是' : '否' }}</span>
        </template>
        <template v-if="column.dataIndex === 'isUpdated'">
          <span :style="`color: ${record.isUpdated ? '#39cd20' : '#f00'}`">{{ record.isUpdated ? '是' : '否' }}</span>
        </template>
        <template v-if="column.dataIndex === 'ts'">
          {{ dateFormat(Number(record.ts)) }}
        </template>
      </template>
    </a-table>
    <!---------- 表格 end ----------->

    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize"
        v-model:current="queryForm.pageNum"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        @change="queryData"
        @showSizeChange="queryData"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </a-card>
</template>
<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { iotApi as boxDpi } from '/@/api/plat/boxDiagnosisLog';
  import { iotApi as deviceDpi } from '/@/api/plat/deviceDiagnosisLog';
  import { iotApi as iotBoxApi } from '/@/api/plat/collectBox';
  import { iotApi as iotDeviceApi } from '/@/api/plat/southDevice';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { PageMixin, getDictLabel } from '/@/utils/mixin';
  import { dateFormat } from '/@/utils/date';

  const { total, tableLoading, tableData, selectedRowKeyList, resetQueryForm, queryTableData, deleteFn, batchDeleteFn, queryFormState, watchTotal } =
    PageMixin();

  const defalutData = {
    boxId: undefined,
    deviceId: undefined,
  };
  const boxList = ref([]);
  const deviceList = ref([]);
  let queryForm = ref(Object.assign({}, queryFormState, defalutData));
  watchTotal(queryForm, queryData);
  // 表格列
  const boxColumns = [
    {
      title: '数据通道',
      dataIndex: 'boxId',
    },
    {
      title: '是否在线',
      dataIndex: 'isOnline',
      align: 'center',
    },
    {
      title: '是否数据更新',
      dataIndex: 'isUpdated',
      align: 'center',
    },
    {
      title: '更新时间',
      dataIndex: 'ts',
    },
  ];
  const deviceColumns = [
    {
      title: '数据通道',
      dataIndex: 'boxId',
    },
    {
      title: '设备',
      dataIndex: 'deviceId',
    },
    {
      title: '是否在线',
      dataIndex: 'isOnline',
      align: 'center',
    },
    {
      title: '是否数据更新',
      dataIndex: 'isUpdated',
      align: 'center',
    },
    {
      title: '更新时间',
      dataIndex: 'ts',
    },
  ];
  const columns = ref(boxColumns);
  // 重置查询条件
  function resetQuery() {
    queryForm.value = resetQueryForm(defalutData);
    queryData();
  }
  // 查询数据
  function queryData() {
    let api = boxDpi;
    columns.value = boxColumns;
    if (queryForm.value.boxId) {
      api = boxDpi;
      columns.value = boxColumns;
    }
    if (queryForm.value.deviceId) {
      api = deviceDpi;
      columns.value = deviceColumns;
    }
    queryTableData(api.queryPage, queryForm.value);
  }
  // 列选择
  function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
  }

  function boxChange() {
    queryForm.value = resetQueryForm({
      boxId: queryForm.value.boxId,
    });
    getDeviceList();
    queryData();
  }

  function deviceChange() {
    queryForm.value = resetQueryForm({
      boxId: queryForm.value.boxId,
      deviceId: queryForm.value.deviceId,
    });
    queryData();
  }

  function getBoxList() {
    iotBoxApi.queryList().then(({ data }) => {
      boxList.value = data;
    });
  }

  function getDeviceList() {
    iotDeviceApi.queryList({ boxId: queryForm.value.boxId }).then(({ data }) => {
      deviceList.value = data;
    });
  }
  onMounted(queryData);
  onMounted(getBoxList);
</script>

<style scoped>
  .smart-table-operate {
    display: flex;
    justify-content: space-between;
  }
  .device-menu-item:hover {
    color: #1677ff;
  }
</style>
